<template>
  <div class="compassNav">
    <div class="compassNav__content">
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">个人博客-Hexo</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨个人创建维护的静态网页博客，互联网时代自己的一片自留地，欢快的成长，欢迎大家来我的博客聊天呀😉
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill"
            >Hexo | NexT | GitHub Pages | GitHub Actions | Netlify</span
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://blog.i-xiao.space"
            target="_blank"
            >👉点击访问</a
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://m.i-xiao.space"
            target="_blank"
            >👉点击访问(备用网址)</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">个人博客-VuePress</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨互联网时代自己的一片自留地，文章主要从我的个人语雀文档里移植过来，欢迎访问😉
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill"
            >VuePress | GitHub Pages | GitHub Actions</span
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://home.i-xiao.space/vuepress-star/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">个人主页</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨创建的个人主页，不完全展示我在互联网平台的足迹，欢迎查看😊
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill">
            GitHub Pages + jekyll | GitHub Actions</span
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://home.i-xiao.space"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">PC端网站</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来练习沉淀各种前后端技术，譬如：Docker技术运用、集成自动化部署、基础设施建设、常用工具函数封装、pdf生成、大文件上传、数据传输加解密，还有一些动画特效
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill">Vue | NodeJs | Express</span>
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://web.i-xiao.space"
            target="_blank"
            >👉点击访问</a
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://home.i-xiao.space/pc-web/"
            target="_blank"
            >👉点击访问(备用网址)</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">H5端网站</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来练习移动端布局、适配、兼容性方案，WebRTC人脸识别技术，用户鉴权、业务隔离，升级https协议，编写脚本进行打包压缩等
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill"
            >Vue | WebRTC | face-api.js | node-zip</span
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://home.i-xiao.space/mobile-h5/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">语雀文档</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨杂货铺,日常积累学习,心得体会
        </p>
        <p class="compassNav-item__typeName"><strong>🧨有大量干货</strong></p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://www.yuque.com/xiaojt"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover"
          >掘金（优秀创作者）</span
        >
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来对外输出经验\知识
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://juejin.cn/user/852876755212814/columns"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">CSDN博客</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来对外输出经验\知识
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://blog.csdn.net/heyYouU?type=blog"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">知乎</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来对外输出经验\知识
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://www.zhihu.com/people/xiaojt_95/posts"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">博客园博客</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来对外输出经验\知识
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://www.cnblogs.com/all-smile"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover"
          >个人博客(WordPress)</span
        >
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来对外输出经验\知识
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="http://i-xiao.space:8000/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">ChitChat</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来练习掌握GoWeb开发，掌握网络协议知识，实现基本的论坛功能，主要包括注册、登录、发布、评论功能，登录用户可以实现发布、评论功能，未登录用户仅可以浏览查看
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill">Go | PostgreSQl</span>
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="http://i-xiao.space:8088/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">Docker Hub</span>
        <p class="compassNav-item__typeName clamp_2">✨镜像管理仓库</p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://hub.docker.com/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">Jenkins平台</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨CI集成，构建镜像，自动发布
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="http://i-xiao.space:8082/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">Supervisor</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨Go进程管理平台，进行启停操作、查看日志等
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://www.i-xiao.space/supervisor/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="http://i-xiao.space:9001/"
            target="_blank"
            >👉点击访问(备用网站)</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">Go-Chatroom</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨Go网络编程，C/S架构，通过终端命令操作。主要实现了上线用户广播，统计实时在线人数，消息广播，类似群聊的功能。
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill">Go</span>
        </p>
        <p class="compassNav-item__typeName">
          🔊暂未部署上线，敬请期待
          <!-- <a class="compassNav-item__link text-hover" href="http://i-xiao.space:9001/" target="_blank">👉点击访问</a> -->
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">Gitee</span>
        <p class="compassNav-item__typeName clamp_2">✨代码仓库</p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://gitee.com/hey-u"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">GitHub</span>
        <p class="compassNav-item__typeName clamp_2">✨代码仓库</p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="https://github.com/all-smile"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">学生成绩管理系统</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨刚开始编程的时候练手的小项目，可以录入查看学生成绩信息，后来主要在里面写接口玩
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill"
            >NodeJs | MongoDB | Express | log4js | PM2</span
          >
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="http://i-xiao.space:3000/"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
      <div class="compassNav-item">
        <span class="compassNav-item__count text-hover">WebRTC H5</span>
        <p class="compassNav-item__typeName clamp_2">
          ✨主要用来练习掌握WebRTC相关知识
        </p>
        <p class="compassNav-item__typeName">
          🎨技术栈：
          <span class="compassNav-item__skill">React | WebRTC | Antd</span>
        </p>
        <p class="compassNav-item__typeName">
          <a
            class="compassNav-item__link text-hover"
            href="http://i-xiao.space:8090/main/home"
            target="_blank"
            >👉点击访问</a
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
// 118.190.59.105
export default {
  name: 'CompassNav',
  props: {},
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {},
  updated() { },
  beforeDestroy() { },
}
</script>

<style lang='less' rel='stylesheet/less' scoped>
@import "./index.less";
</style>
